<template>
	<view class="page">
<!-- 		<view class="header">
			<image :src="config.logo" mode=""></image>
			<view>
				<view>
					{{data.appName}}
				</view>
				<view>
					{{data.appDes}}
				</view>
			</view>
		</view> -->
	<!-- 	<view class="bg">
		</view> -->
		<view class="content">
			<image src="/static/image/upBg.png" mode="scaleToFill" style="width: 100%;height: 85%;"></image>
		</view>
		<view class="btns">
			<view @click="down('and')" class="text">
				<view class="icon">
					<image src="@/static/image/uploadPage/and.png" mode=""></image>
				</view>
				<view class="text">
					<view>Andriod版</view>
				</view>
			</view>
			<view @click="down('ios')" class="text iphone">
				<view class="icon">
					<image src="@/static/image/uploadPage/ios.png" mode=""></image>
				</view>
				<view class="text">
					<view>iphone版</view>
				</view>
			</view>
		</view>
		<view class="wx" v-if="data.weixin">
		
		</view>
	</view>
</template>

<script setup>
	const systemApi = uniCloud.importObject('admin-system', { customUI: true })
	import { ConfigStore } from "@/store/modules/config.js";
	import { LoginStore } from "@/store/modules/login.js";
	import { ref, reactive, computed } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	const userInfo = computed(() => (LoginStore().userInfo))
	const config = computed(() => (ConfigStore().config))
	
	const data = reactive({
		appLogo: '', //app logo图片路径
		appName: '千度导航', //app名称
		appDes: '千度导航,最强引流纯绿色平台', //app简述
		andHref: '', //安卓app下载地址
		// iosHref: 'https://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8', //苹果appStore链接
		weixin: false, //是否为微信内浏览器打开
		scheme: '' //scheme地址 如果已安装app直接打开，置空则不执行
	})
	onLoad(async() => {
		const res = await systemApi.getAppUrl()
		data.andHref = res?.data?.url
		isWX()
	})

	function setTitle() {
		uni.setNavigationBarTitle({
			title: data.appName + '下载'
		});
	}

	function isWX() {
		let ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i)=="micromessenger") {
			data.weixin = true
		} else {
			data.weixin = false
		}
	}

	function openApp() {
		if (data.scheme) {
			window.location = data.scheme
		}
	}

	function down(type) {
		if (type == 'and') {
			window.location.href = data.andHref;
		} else {
			uni.reLaunch({
                url:"/pages/entrance/login/login"
            })
		}
	}
</script>

<style lang="less">
	@BgColor: var(--fui-color-primary); //主题背景色

	.page {
		background-color: #f8f8f8;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.header {
			width: 100vw;
			height: 350upx;
			background: url(/static/image/my/mybj.png);
			background-size: 100% 100%;
			background-position: center top;
			background-repeat: no-repeat;
			padding-top: 110upx;
			display: flex;
			justify-content: center;

			image {
				width: 120upx;
				height: 120upx;
				margin-right: 30upx;
			}

			>view {
				height: 120upx;
				color: #fff;
				font-weight: 700;
				display: flex;
				flex-direction: column;
				justify-content: center;

				view:nth-child(1) {
					font-size: 34upx;
				}

				view:nth-child(2) {
					font-size: 28upx;
				}
			}
		}

		.iphone {
			color: #0079ff;
		}

		// .bg {
		// 	width: 100vw;
		// 	height: 210upx;
		// 	background-image: url('@/static/image/uploadPage/bg.png');
		// 	background-size: 100%;
		// 	background-position: center bottom;
		// 	background-repeat: no-repeat;
		// 	position: absolute;
		// 	left: 0;
		// 	top: 300upx;
		// }

		.content {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			overflow: hidden;

			image {
				width: 100vw;
				height: 70vh;
			}
		}

		.btns {
			width: 100vw;
			display: flex;
			justify-content: space-around;
			position: absolute;
			bottom: 5%;
			left: 0;

			>view {
				height: 100upx;
				background-color: @BgColor;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				box-shadow: 0 10upx 24upx -10upx @BgColor;
				;

				.icon {
					padding-left: 30rpx;
					width: 80upx;
					height: 120upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					padding-right: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					view:nth-child(1) {
						font-size: 34upx;
					}

				}

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			>view:nth-child(2) {
				margin-bottom: 0upx;
			}
		}

		.wx {
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .7);
			width: 100vw;
			height: 100vh;
			background-image: url(/static/image/uploadPage/wx.png);
			background-size: 100%;
			background-position: center 100upx;
			background-repeat: no-repeat;
			z-index: 999;
		}
	}
</style>